<template>
  <el-dialog title="生产计划" :visible.sync="visible" :center="true" width="82%" :close-on-click-modal="false">
    <el-table
        :data="toolProductionPlanVOS" border
        stripe
        style="width: 100%" size="mini" :show-summary="true">
      <el-table-column label="序号" width="50" type="index"></el-table-column>
      <el-table-column label="产品名称" width="150px" prop="name"></el-table-column>
      <el-table-column label="产品图纸" width="150px" prop="toolAttachments">
        <template slot-scope="scope">
          <el-link v-for="attachment in scope.row.toolAttachmentVOS" :key="attachment.id"
                   :href="attachment.filePath"
                   target="_blank">
            {{ attachment.filePath.split('/').pop() }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="图号" width="150px" prop="drawingNumber"></el-table-column>
      <el-table-column label="数量" width="100px" prop="number"></el-table-column>
      <el-table-column label="交货时间" width="100px" prop="requestDeliveryTime"></el-table-column>
      <el-table-column label="毛坯图" width="150px" prop="toolAttachments">
        <template slot-scope="scope">
          <el-link v-for="attachment in scope.row.toolAttachmentVOS" :key="attachment.id"
                   :href="attachment.filePath"
                   target="_blank">
            {{ attachment.filePath.split('/').pop() }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="加工程序" width="150px" prop="toolAttachments">
        <template slot-scope="scope">
          <el-link v-for="attachment in scope.row.toolAttachmentVOS" :key="attachment.id"
                   :href="attachment.filePath"
                   target="_blank">
            {{ attachment.filePath.split('/').pop() }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="生产计划" v-model="value1">
        <el-date-picker size="mini"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-table-column>
    </el-table>
    <el-card shadow="never" style="height: 150px; margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>审批记录</span>
      </div>
      <div ref="canvas" style="width:auto;height: auto;"></div>
    </el-card>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>审批意见</span>
      </div>
      <el-timeline style="padding: 0 !important;">
        <el-timeline-item
            v-for="(item, index) in processCommentArray"
            :key="index"
            :timestamp=item.taskName placement="top">
          <div
              style="display: flex; align-items: center; justify-content: space-between; width: 100%;border: 1px solid #ebeef5; padding: 0 10px">
            <h4>{{ item.userId }}&nbsp;:&nbsp;{{ item.message }}</h4>
            <h4>{{ item.time }}</h4>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-row>
      <el-col :span="24">
        <el-input type="textarea" size="mini" rows="3" placeholder="请填写处理意见"
                  v-model="productionPlanComment"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="submit">提 交</el-button>
        <el-button type="warning" size="mini" @click="cancle">退 回</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import bpmnXML from "@/assets/toolProcess.bpmn20.xml"
export default {
  name: "ToolProductionPlan",
  props: {
    historyData: Object
  },
  data(){
    return{
      toolProductionPlanVOS:[{}],
      processCommentArray:[],
      productionPlanComment:'',
      value1:''
    }
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.isVisible;
      },
      set(value) {
        this.$store.commit('setIsVisible', value);
      }
    },
  },
  watch: {
    visible(newVal) {
      console.log('Visible changed to: ', newVal);
    }
  },
  methods:{
    importXMLPromise(xmlData) {
      return new Promise((resolve, reject) => {
        this.bpmnModeler.importXML(xmlData, (err, warnings) => {
          if (err) {
            reject(err);
          } else {
            resolve(warnings);
          }
        });
      });
    },
    loadBPMN() {
      return this.importXMLPromise(bpmnXML).then(warnings => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport');
        return warnings; // 可以返回 warnings 或其他有用的信息
      }).catch(error => {
        console.error('导入流程失败', error);
        this.$message.error('导入失败，请检查XML格式');
        throw error; // 重新抛出错误，以便可以在外部捕获
      });
    },
    applyColors() {
      const elementRegistry = this.bpmnModeler.get('elementRegistry');
      const modeling = this.bpmnModeler.get('modeling');
      // 定义颜色映射
      const colors = {
        waitingToDo: '#E6A23C',
        highPoint: '#E1F3D8',
        iDo: '#67C23A',
        highLine: '#D8E0D4'
      };
      // 遍历 historyData 并应用颜色
      Object.keys(this.historyData).forEach(key => {
        this.historyData[key].forEach(id => {
          if (id) {
            const element = elementRegistry.get(id);
            if (element) {
              // 判断元素类型，应用不同的样式
              if (element.type === 'bpmn:SequenceFlow') { // 对于连线
                modeling.setColor([element], {
                  stroke: colors[key]
                });
              } else { // 对于用户任务节点
                modeling.setColor([element], {
                  stroke: '#545454', // 边框颜色为黑色
                  fill: colors[key], // 填充颜色
                  color: colors[key] // 文本颜色
                });
              }
            }
          }
        });
      });
    },
    submit(){},
    cancle() {
      this.$store.commit("setIsVisible", false)
    },
  },
  mounted() {
    this.taskId = this.$store.state.taskId
    this.$nextTick(() => {
      if (this.$refs.canvas) {
        this.bpmnModeler = new BpmnModeler({
          container: this.$refs.canvas,
          additionalModules: [{
            // 禁用滚轮滚动
            zoomScroll: ["value", ""],
            // 禁止拖动线
            bendpoints: ["value", ""],
            // 禁用左侧面板
            paletteProvider: ["value", ""],
            // 禁止点击节点出现contextPad
            contextPadProvider: ["value", ""],
            // 禁止双击节点出现label编辑框
            labelEditingProvider: ["value", ""]
          }]
        })
      }
      this.loadBPMN().then(() => {
        this.applyColors()
      })
    })
    this.$http.get(`/history/comment/${this.taskId}`).then((response) => {
      if (response.data.code == 1) {
        this.processCommentArray = response.data.data
        console.log(JSON.stringify(this.processCommentArray,null,2))
      }else {
        console.log("历史评论获取失败")
      }
    })
  }
}
</script>

<style scoped>
::v-deep .el-card{
  margin: 0 !important;
  padding: 0 !important;
}
::v-deep .el-card__header {
  padding: 5px 10px !important;
}

</style>